<template>
    <div class="control-setting-container">
        <el-tabs v-model="activeName">
            <el-tab-pane label="表单项设置" name="formItem">
                <el-form label-position="top" label-width="80px" :model="currentControl" v-if="Object.keys(currentControl).length">
                    <template v-if="currentControl.itemType === 0">
                        <el-form-item label="分组名称">
                            <el-input v-model="currentControl.name" @focus="_focus" @blur="_blur"></el-input>
                        </el-form-item>
                    </template>
                    <template v-else-if="currentControl.itemType === 1">
                        <el-form-item label="子表名称">
                            <el-input v-model="currentControl.name" @focus="_focus" @blur="_blur"></el-input>
                        </el-form-item>
                        <el-form-item label="所属分组" v-if="groupName">
                            <div>{{groupName || "无"}}</div>
                        </el-form-item>
                        <template v-for="(item, index) in currentControl.list">
                            <group-item :ChildControlItemList.sync="item" :key="index"></group-item>
                        </template>
                    </template>
                    <template v-else>
                        <item-setting :itemData.sync="currentControl" :list.sync="currentList" :unitsData="unitsData"></item-setting>
                        <el-form-item label="所属分组" v-if="groupName">
                            <div>{{groupName || "无"}}</div>
                        </el-form-item>
                    </template>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="批量删除" name="batchSettings" :disabled="_isReadOnly">
                <batch-settings :list.sync="currentList"></batch-settings>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { Component, PropSync, Watch, Vue } from "vue-property-decorator";
import ItemSetting from "./components/item-setting/index.vue";
import GroupItem from "./components/group-item/index.vue";
import BatchSettings from "./components/batch-setting/index.vue";

@Component({
    components: {
        ItemSetting,
        GroupItem,
        BatchSettings
    }
})
export default class ControlSetting extends Vue {
    @PropSync("settingControl", { type: Object, default: () => { return {}; } }) readonly currentControl!: any;
    @PropSync(
        'list',
        {
            type: Array,
            default: () => {
                return [];
            }
        })
    readonly currentList!: any[];

    get _isReadOnly() {
        return this.$route.query.isDetail === '1' || this.$route.query.isSend === 'send';
    }

    @Watch("currentControl", { immediate: true, deep: true })
    changeCurrentControl() {
        this.controlGroup();
    }

    groupName = ""
    activeName = "formItem"
    oldName = ""
    unitsData: any[] = []

    created() {
        this.getUnits();
    }

    // 获取单位
    async getUnits() {
        const res = await this.$server.getUnits({
            data: {}
        });
        if (res.data.code === 200) {
            this.unitsData = res.data.data;
        } else {
            this.$message.error(res.data.message || "单位获取失败!");
        }
    }

    controlGroup() {
        const outObj: any = {
            name: "",
            id: "",
            list: this.currentList
        };

        const getFather: any = (obj: any) => {
            const list = Array.isArray(obj) ? obj : obj.list || obj.items;
            const { tempId } = this.currentControl;
            for (let i = 0; i < list.length; i++) {
                if (list[i].tempId === tempId) {
                    return obj;
                } else if (list[i].items.length) {
                    if (getFather(list[i])) {
                        return getFather(list[i]);
                    }
                }
            }
        };

        this.groupName = getFather(outObj) ? getFather(outObj).name : "无";
    }

    _focus() {
        this.oldName = this.currentControl.name;
    }

    _blur() {
        if (!this.currentControl.name) {
            this.currentControl.name = this.oldName;
        }
        this.oldName = "";
    }
}
</script>

<style lang="scss" scoped>
    .control-setting-container {
        .options-btn {
            width: 100%;
            div {
                @include textEllipsis();
            }
        }
        ::v-deep {
            .el-tabs__content {
                padding: 0 12px 0 26px;
            }
        }
    }
</style>
